fadeIn() และ fadeOut() คือ คำสั่งของ JQuery ในหมวดของ Effects มีไว้สำหรับการสร้าง Effects จางเข้า (Fade In) และจางออก (Fade Out) ให้กับ Elements ที่ต้องการ
ภาพรวมของ fadeIn() และ fadeOut()
1. ใช้คำสั่ง $('[Element_Target]').fadeIn('[Duration]') สำหรับการสร้าง Effects แบบจางเข้าให้กับ Elements
2. ใช้คำสั่ง $('[Element_Target]').fadeOut('[Duration]') สำหรับการสร้าง Effects แบบจางออกให้กับ Elements
3. Parameter Duration คือ อัตราความเร็วของ Effects สามารถกำหนดเป็นค่าคงที่ได้ 2 ค่า คือ slow และ fast
4. Parameter Duration สามารถกำหนดเป็นหน่วย Microseconds ได้เช่น 200, 2000, 2000 เป็นต้น
ตัวอย่างโปรแกรม
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.min.js"></script>
<title>amplysoft.com</title>
</head>
<body>
<input type='button' value='Fade In' id='fadeIn' />
<input type='button' value='Fade Out' id='fadeOut' />
<p>
AmplySoft รับเขียนเว็บ รับทำเว็บ<br/>
AmplySoft เรียนเขียนโปรแกรม รับสอนเขียนโปรแกรม<br/>
AmplySoft รับจัดอบรม รับเป็นวิทยากร<br/>
AmplySoft รับเขียนโปรแกรมมือถือทุกชนิด
</p>
<script type="text/javascript">
$(document).ready(function(){
$('#fadeIn').click(function(){
$('p').fadeIn('slow');
});
$('#fadeOut').click(function(){
$('p').fadeOut('slow');
});
});
</script>
</body>
</html>
ผลลัพธ์
